<template>
	<view>
		<!-- 顶部占位 -->
		<!-- <view-navbar></view-navbar> -->
		<view class="">
			<view class="content">
				<view class="margin">
					<view class="flex-cen search_ss" style="margin-top:10rpx ; margin-bottom: 16rpx;">
						<!-- 						<u-icon name="arrow-left" color="" size="25" @click="back" style="margin-right: 20rpx;">
						</u-icon> -->
						<u-search @search="search" style="width: 624rpx;" :showAction="false" placeholder="搜索商品"
							v-model="form.uproductName" :clearabled="true" searchIconColor="#2d81ff"
							borderColor="#DDDDDD" bgColor="#ffffff">
						</u-search>
					</view>
				</view>

				<view class="categoryContent">
					<!-- 目录 -->
					<scroll-view scroll-y class="left-aside">
						<view v-for="(item, index) in list" :key="item.id" class="f-item b-b"
							:class="{ active: index === currentIndex }" @click="tabtap(item, index)">
							{{ item.name }}
						</view>
					</scroll-view>
					<!-- 内容 -->
					<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll"
						:scroll-top="tabScrollTop">
						<!-- 标签 -->
						<view class="mt10">
							<view class="Subsection margin ms17" style="display: flex;justify-content: space-between; ">
								<view class="" v-for="(item, index) in radios" :key="index">
									<u-tag :text="item.name" :plain="!item.checked" :name="index"
										@click="radioClick(index, item)">
									</u-tag>
								</view>
							</view>
						</view>
						<!-- 排序 -->
						<view class="margin ">
							<view class="item">
								<view class="ms10 flexflex">
									<view class=" flex-cen mr20">
										<view class="" style="margin-right: 19rpx; ">
											综合
										</view>
										<u-icon name="arrow-down-fill"></u-icon>
									</view>
									<view class=" flex-cen">
										<view class="" style="margin-right: 19rpx;;">
											价格
										</view>
										<u-icon name="arrow-down-fill"></u-icon>
									</view>
								</view>
							</view>
						</view>
						<!-- 商品 -->
						<block v-if="slist.length > 0">
							<view v-for="(item) in slist" :key="item.uproductid" class="s-list" :id="'main-' + item.id">
								<image @click="$pub.go(`/pages_shop/goodsDetail/goodsDetail?data=${item.uproductid}`)"
									:src="item.uproductPic"></image>
								<view class="details">
									<text>{{ item.uproductName || '商品名' }}</text>
									<!-- 10片/盒 -->
									<text>{{ item.uproductSpecs || '商品规格' }}</text>
									<view class="" style="display: flex;justify-content: space-between;">
										<text class="color_orange mr20">￥{{ item.upretailPrice || '100' }}</text>
										<image src="/static/img/goodscate/goodscar.png"
											style="width: 50rpx;height: 50rpx;"></image>
										<!-- 									<u-button @click="addCom(item)" text="添加用药" type="primary"
											size='mini'></u-button> -->
									</view>
								</view>
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				/* 搜素 */
				form: {
					"pageNum": 1,
					"pageSize": 10,
					"productCategoryId": "",
					"productTypeId": "",
					"uproductName": "",
					"total": 0
				},
				/* 单选标签 */
				radios: [],
				sizeCalcState: false,
				tabScrollTop: 0,
				currentIndex: 0,
				/* 目录 */
				list: [],
				/* 商品列表 */
				slist: [],
				/* 用药数量 */
				num: 0
			}
		},
		created() {
			this.loadData();
		},
		onLoad: function(option) {
			if (typeof option.type != 0) {
				// this.current = JSON.parse(decodeURIComponent(option.type));
				this.currentIndex = JSON.parse(decodeURIComponent(option.type));
			}
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation: false
			// })
			this.getListKind()
			this.getListType()
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/* 搜索返回 */
			back() {
				/*uni.navigateBack({
					delta: 1
				})*/
				//@zxyuns 处理兼容，如果没有上一级界面则返回首页
				const pages = getCurrentPages();
				if (pages.length === 2) {
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					uni.switchTab({
						url: '/pages/home/home',
					})
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},

			/* 初始加载 */
			loadData() {
				// this.slist = this.list[0].childlist
				this.getProduct()
			},
			async getListKind() {
				let re = await this.$API.productApi.getListType()
				this.list = re
			},
			async getListType() {
				let re = await this.$API.productApi.getListKind()
				/* 单选 */
				this.radios = re.map((i) => {
					i.checked = false;
					return i;
				})
				/* 补充数据 */
				this.radios.unshift({
					name: "全部",
					checked: true,
					// productCategoryId: '1'
				})
			},
			/* 商品列表 */
			async getProduct() {
				let re = await this.$API.productApi.getProduct(this.form)
				this.form.pageNum = re.current
				this.form.pageSize = re.size
				this.form.total = re.total
				this.slist = re.records
				return re.records
			},
			/* 添加用药 */
			addCom(e) {
				// let obj = {
				// 	name: "药品",
				// 	guige: '10/片每盒',
				// 	价格: '50',
				// 	img: "/static/logo.png",
				// 	sele: 2,
				// }
				/* 额外属性 */
				e.sele = 2
				e.count = 1
				this.num++
				if (this.num >= 1) {
					// this.$pub.go('/pages/preview/preview')
					uni.navigateTo({
						url: '/pages/online/online'
					})
					setTimeout(() => {
						uni.$emit('addProduct', e)
					}, 100)
				}
			},
			//一级分类点击
			tabtap(item, index) {
				/* 动态css */
				this.currentIndex = index
				/* 条件 */
				this.form.productTypeId = item.productTypeId
				/* 重新请求 */
				this.getProduct()
			},
			/* tag点击 */
			radioClick(indexR, item) {
				this.radios.map((item, index) => {
					item.checked = index === indexR ? true : false
				})
				/* 条件 */
				this.form.productCategoryId = item.productCategoryId
				/* 重新请求 */
				this.getProduct()
			},
			/* 搜素 */
			search(data) {
				// console.log(data, "data");
				this.form.uproductName = data
				/* 重新请求 */
				this.getProduct()
			},

			/* 去商品详情 */
			toPage(href) {
				uni.navigateTo({
					url: href
				});
			},


			//右侧栏滚动
			asideScroll(e) {
				if (!this.sizeCalcState) {
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.currentId = tabs[0].pid;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach(item => {
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},









			/* 搜索返回 */
			// back() {
			// 	/*uni.navigateBack({
			// 		delta: 1
			// 	})*/
			// 	//@zxyuns 处理兼容，如果没有上一级界面则返回首页
			// 	const pages = getCurrentPages();
			// 	if (pages.length === 2) {
			// 		uni.navigateBack({
			// 			delta: 1
			// 		});
			// 	} else if (pages.length === 1) {
			// 		uni.switchTab({
			// 			url: '/pages/index/index',
			// 		})
			// 	} else {
			// 		uni.navigateBack({
			// 			delta: 1
			// 		});
			// 	}
			// },
		},
	}
</script>

<style lang='scss' scoped>
	/* #ifdef MP */
	::v-deep .u-search__content__input {
		font-size: 28rpx !important;
	}

	/* #endif */
	/* 更改tag切换颜色 */
	::v-deep .u-tag--primary {
		background-color: #7976E9;
		border-color: #7976E9;

	}

	::v-deep .u-tag--primary span {
		color: #FFFFFF;
	}

	.item {
		text-align: center;
	}

	.content {
		display: flex;
		flex-direction: column;
	}

	.categoryContent {
		width: 100%;
		height: calc(100vh - 100rpx);
		display: flex;
		/* border-top: 2upx solid #f0f0f0; */
		box-sizing: border-box;
	}

	/* 左右cate */
	.left-aside,
	.right-aside {
		padding-bottom: 100rpx;
	}

	.left-aside {
		flex-shrink: 0;
		width: 154upx;
		background-color: #f8f8f8;
		overflow: hidden auto;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 86upx;
		font-size: 26upx;
		position: relative;

		&.active {
			color: $uni-primary;
			background: #fff;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 9upx;
				background-color: $uni-primary;
				border-radius: 0 8rpx 8rpx 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 58upx;
		padding-top: 6upx;
		font-size: 22upx;
		/* color: $font-color-dark; */
	}

	.s-list {
		display: flex;
		justify-content: space-between;
		padding: 20upx;

		image {
			width: 192upx;
			height: 140upx;
			margin-right: 26upx;
		}

		.details {
			flex: 1;
			display: flex;
			justify-content: center;
			flex-direction: column;
			/* align-items: flex-start; */
			align-items: stretch;

			text {
				&:first-child {
					font-size: 28rpx;
					font-weight: bold;
					color: #161712;
				}

				&:nth-child(2) {
					font-size: 24rpx;
					font-weight: 400;
					color: #666;
				}
			}
		}
	}

	.t-list {
		display: flex;
		/* align-items: flex-end; */
		background: #fff;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 178upx;
		font-size: 28upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 140upx;
			height: 140upx;
		}
	}



	.search_ss {
		::v-deep .u-search__content__input {
			font-size: 28rpx !important;
		}
	}

	::v-deep .u-tag--medium {
		font-size: 30rpx;
		height: 50rpx;
	}

	::v-deep .u-tag__text--medium {
		font-size: 26rpx !important;
	}
	::v-deep .u-tag--square{
		border-radius: 6rpx;
	}
</style>